<template>
	<div class="manager w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>课程管理</p>
			<b class="rightBtn" @click="rankKc">课程榜</b>
			<b class="rightBtn" @click="labelKc">课程标签</b>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listOne" @click="createSubject" v-if="manager.kcgl_add">新增课程</a>
				<a class="listTwo" @click="importDaoChu" v-if="manager.kcgl_export">导出数据</a>
				<el-select v-model="permission" @change="getTableList" class="th_3" v-if="isOpen==1">
					<el-option label="课程权限" value=""></el-option>
					<el-option v-for="item in permissionArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
				</el-select>
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程、讲师、审核员..." v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
				<el-table-column prop="nickname" label="讲师" width="120"></el-table-column>
				<el-table-column prop="auditUserName" label="审核员" width="120"></el-table-column>
				<el-table-column label="课程数据" width="120">
					<template slot-scope="scope">
						<el-button @click="handleDetail(scope.row)">查看详情</el-button>
					</template>
</el-table-column>
<el-table-column label="操作" width="140">
    <template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" v-if="manager.kcgl_edit">编辑</el-button>
						<el-button @click="handlecomments(scope.row)" v-if="manager.kcgl_comment" class="blue">评论</el-button>
						<el-button @click="handleDelete(scope.row)" v-if="manager.kcgl_del" class="red">删除</el-button>
					</template>
</el-table-column>
</el-table>
<div class="fenyeMargin">
    <el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
    <el-button @click="handleDeleteAll()" class="allDelete" v-if="manager.kcgl_delAll">批量删除</el-button>
    <div class="pag_block">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
    </div>
</div>
</div>
</div>
</template>
<script>
    import alert from '../../components/Alert.vue';
    import deleteAlert from '../../components/deleteAlert.vue';
    export default {
        data() {
            return {
                isOpen: '',
                manager: '',
                search: '',
                permission: '',
                permissionArr: [],
                searchSelect: [],
                courseColumnYi: '',
                tableData: [],
                pagesize: 15,
                currentpage: 1,
                total: 1,
                deleteType: 'delete',
                multipleSelection: [],
                options: [],
                optionProps: {                    
                    value: 'id',
                                        label: 'columnName',
                                        children: 'childList'                
                }
            }
        },
        methods: {
            getTableList() {
                var s = {   
                    page: this.currentpage,
                    num: this.pagesize,
                    fuzzyFields: this.search,
                    courseWatchPer: this.permission,
                    rootcompanyid: 1,
                    courseType: 1                
                };
                if (this.searchSelect != null && this.searchSelect.length >= 2) {                
                    s.courseColumnYi = this.searchSelect[0];
                    s.courseColumn = this.searchSelect[1];                
                };
                this.$ajax({
                    url: this.$root.jifuUrl + "/mns/kcCourse/selectKcCourseListV2",
                    headers: {
                        'ContentType': 'application/json; charset=utf-8'
                    },
                    method: 'POST',
                    data: s,
                    success: res => {
                        if (res.data.code == 200) {
                            this.tableData = res.data.data.pageList.list;
                            this.total = res.data.data.pageList.pageParam.items;
                            this.isOpen = res.data.data.isopen;
                        }
                    }
                });
            },
            rankKc() {
                this.$router.push({
                    name: 'rankKc'
                })
            },
            labelKc() {
                this.$router.push({
                    name: 'labelKc'
                })
            },
            handleEdit(row) {
                this.$ajax({
                    url: this.$root.jifuUrl + "/mns/kcCourse/getCourseDetails",
                    headers: {
                        'ContentType': 'application/json; charset=utf-8'
                    },
                    method: 'POST',
                    data: {
                        id: row.id
                    },
                    success: res => {
                        if (res.data.code == 200) {
                            this.$router.push({
                                name: 'addsub',
                                params: {
                                    type: 'edit'
                                }
                            })
                            this.$root.managerMsg = res.data.data;
                        } else {
                            console.log("获取详细信息失败")
                        }
                    }
                });
            },
            handlecomments(row) {
                this.$router.push({
                    name: 'addcomment',
                    params: {
                        courseId: row.id,
                        courseName: row.courseName
                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
                    })
                    this.allSelect = !this.allSelect;
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for (var i = 0; i < val.length; i++) {
                    var s = {
                        id: val[i].id
                    }
                    this.multipleSelection.push(s)
                }
            },
            handleDelete(row) {
                this.transitionRow = row;
                this.$rootFunction().rootDelete();
            },
            handleDeleteAll() {
                this.$rootFunction().rootDeleteAll();
            },
            deleteSubmit() {
                if (this.deleteType == 'delete') {
                    let that = this,
                        list = [];
                    list.push({
                        id: this.transitionRow.id
                    });
                    this.$ajax({
                        url: this.$root.jifuUrl + "/mns/kcCourse/deleteKcCourseState",
                        headers: {
                            'ContentType': 'application/json; charset=utf-8'
                        },
                        method: 'DELETE',
                        data: list,
                        success: res => {
                            if (res.data.code == 200) {
                                this.$rootFunction().deleteResSuccess();
                            } else {
                                this.failText = res.data.message;
                                this.$rootFunction().deleteResFail();
                            }
                        }
                    });
                } else {
                    this.$ajax({
                        url: this.$root.jifuUrl + "/mns/kcCourse/deleteKcCourseState",
                        headers: {
                            'ContentType': 'application/json; charset=utf-8'
                        },
                        method: 'DELETE',
                        data: this.multipleSelection,
                        success: res => {
                            if (res.data.code == 200) {
                                this.$rootFunction().deleteResSuccess();
                            } else {
                                this.failText = res.data.message;
                                this.$rootFunction().deleteResFail();
                            }
                        }
                    });
                }
            },
            handleCurrentChange(value) {
                this.currentpage = value;
                this.getTableList();
            },
            createSubject() {
                this.$router.push({
                    path: '/addsub'
                })
            },
            handleDetail(row) {
                this.$router.push({
                    name: 'liveData',
                    params: {
                        liveId: row.id,
                        updateTitle: row.courseName,
                        pathKey: 'manager'
                            //						pageTypeNum:6
                    }
                })
            },
            importDaoChu() {

            },
            getTreeData(data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].childList.length < 1) {
                        data[i].childList = undefined;
                    } else {
                        this.getTreeData(data[i].childList);
                    }
                }
                return data;        
            },
            getColumnList() {
                let columnType = [1];
                this.$rootFunction().columnList({
                    columnType
                });
            },
            getTagType() {
                let tagType = 4;
                this.$rootFunction().tagType({
                    tagType
                });
            }
        },
        components: {
            alert,
            deleteAlert
        },
        mounted: function() {
            this.getTableList();
            this.getColumnList();
            this.getTagType();
            this.manager = this.$root.huasan.manager;
        }
    }
</script>